<template>
  <view v-if="!isScroll" :class="classNameList" :style="{'z-index': zIndex}" @touchmove.stop.prevent="moveHandle">
    <view class="_mask" @click="onCancel"/>
    <view class="_body" :style="{'background':  background}">
      <view v-if="title || cancel" class="_header">
        <view v-if="title" class="_title">{{ title }}</view>
        <view v-if="cancel" class="_cancel" @click.stop="onCancel">
          <x-icon name="icon-025" size="28" color="#C8C9CC" />
        </view>
      </view>
      <slot />
    </view>
  </view>
  <view v-else :class="classNameList" :style="{'z-index': zIndex}">
    <view class="_mask" @click="onCancel" @touchmove.stop.prevent="moveHandle" />
    <view class="_body" :style="{'background':  background}">
      <slot />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'XDrawer',
  components: {
    XIcon
  },
  props: {
    isScroll: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'btt' // ltr 左往右 rtl 右往左 ttb 上往下 btt 下往上
    },
    background: {
      type: String,
      default: '#fff'
    },
    isMask: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: String,
      default: '1000'
    },
    title: {
      type: String,
      default: ''
    },
    round: {
      type: Boolean,
      default: false
    },
    cancel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    classNameList() {
      const arr = ['x-drawer', `is-${this.direction}`];
      if (this.visible) {
        arr.push('is-show');
      }
      // 圆角
      if (this.round) {
        arr.push('is-round');
      }
      return arr.join(' ');
    }
  },
  watch: {},
  created() {

  },
  methods: {
    // 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数
    moveHandle() {},
    onCancel() {
      if (this.isMask) {
        this.$emit('update:visible', false);
        this.$emit('cancel');
      }
    }
  }
};
</script>

<style lang="scss">
  .x-drawer{
    position: fixed; width: 100%; height: 100%; z-index: 1000; left: 0; top: 0; display: none; overflow: hidden;
    &.is-show{
      display: block;
    }
    &.is-ltr{
      ._body{ animation: ltrIn .3s ease-out; left: 0; height: 100%;}
      &.is-round{
        ._body{ border-radius: 0 $uni-border-radius-lg $uni-border-radius-lg 0; }
      }
    }
    &.is-rtl{
      ._body{ animation: rtlIn .3s ease-out; right: 0; height: 100%;}
      &.is-round{
        ._body{ border-radius: $uni-border-radius-lg 0 0 $uni-border-radius-lg; }
      }
    }
    &.is-ttb{
      ._body{ animation: ttbIn .3s ease-out; top: 0; width: 100%;}
      &.is-round{
        ._body{ border-radius:  0 0 $uni-border-radius-lg $uni-border-radius-lg; }
      }
    }
    &.is-btt{
      ._body{ animation: bttIn .3s ease-out; bottom: 0; width: 100%;}
      &.is-round{
        ._body{ border-radius: $uni-border-radius-lg $uni-border-radius-lg 0 0; }
      }
    }
    ._mask{ background-color: rgba(0,0,0,.5); position: absolute; width: 100%; height: 100%; left: 0; right: 0;}
    ._body{
      position: absolute; overflow: hidden;
    }
    ._header {
      padding: 36px 40px; position: relative;
      ._title { font-size: 32px; color: #323233; text-align: center;}
      ._cancel { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; transform: translate3d(0, -50%, 0);}
    }
  }

  @keyframes ltrIn {
    0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes rtlIn {
    0% { opacity: 0; transform: translate3d(100%, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes ttbIn {
    0% { opacity: 0; transform: translate3d(0, -100%, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes bttIn {
    0% { opacity: 0; transform: translate3d(0, 100%, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
  }
</style>
